<template>
    <BasePage title="账号管理">
        <template #left>
            <BaseFilterTree
                ref="filterTreeRef"
                nodeKey="kid"
                :data="state.leftList"
                :props="{ label: 'name', children: 'children' }"
                :clickFirstOnDataChange="true"
                @nodeClick="handleTreeNodeClick"
            ></BaseFilterTree>
        </template>
        <BasePageBox :contentScrollbar="true">
            <BaseSearchForm
                ref="searchFormRef"
                v-bind="searchFormInfo"
                @search="getDataList"
                @reset="flushData"
            ></BaseSearchForm>
        </BasePageBox>
        <BasePageBox class="flex-[1_0]">
            <div class="w-100% h-100% flex flex-col gap-10px">
                <div class="flex-1 min-h-0">
                    <BaseTable
                        v-bind="tableProps"
                        v-loading="loading"
                        :tableData="tableData"
                        ref="BaseTableRef"
                    ></BaseTable>
                </div>
                <div class="flex justify-end">
                    <BasePagination
                        small
                        :paginationData="paginationData"
                        @paginationChange="getDataList"
                    ></BasePagination>
                </div>
                <TableDialog ref="dialogRef" @submit="getDataList"></TableDialog>
            </div>
        </BasePageBox>
    </BasePage>
</template>

<script lang="jsx" setup>
import { ref, reactive, computed, unref, provide, watch } from 'vue'
import TableDialog from './dialog.vue'
import { useDialogCRUDInstance, useTableCRUD } from '@/composables'
import * as api from '#/systemManagement/api/accountManagement'
import { ElMessage, ElSwitch } from 'element-plus'

defineOptions({
    name: 'accountManagement'
})

const filterTreeRef = ref()
const searchFormRef = ref()

const searchData = computed(() => {
    return {
        ...unref(searchFormRef)?.formData,
        orgId: state.leftListCurrentVal?.orgId,
        deptId: state.leftListCurrentVal?.deptId
    }
})

const state = reactive({
    leftList: [],
    leftListCurrentVal: null
})

provide('accountManagementRoot', {
    state
})

// onMounted(async () => {
//     const res = await useRequest(getAllOrganizationDeptTree)
//     state.leftList = arrToTree(res || [])
// })

watch(
    () => state.leftListCurrentVal,
    () => {
        getDataList()
    }
)

const handleTreeNodeClick = data => {
    unref(filterTreeRef).treeRef.setCurrentKey(data.kid)
    state.leftListCurrentVal = data
}

const searchFormInfo = reactive({
    expose: {},
    formList: [
        {
            type: 'input',
            prop: 'userId',
            props: {
                placeholder: '登录ID',
                clearable: true
            }
        },
        {
            type: 'input',
            prop: 'userName',
            props: {
                placeholder: '姓名',
                clearable: true
            }
        }
    ]
})

const { dialogRef, dialogAdd, dialogUpdate } = useDialogCRUDInstance()

const { dialogRef: associateDialogRef, dialogUpdate: associateDialogUpdate } = useDialogCRUDInstance()

const {
    BaseTableRef,
    loading,
    tableData,
    getDataList,
    handleDelete,
    handleBatchDelete,
    paginationData,
    flushData
} = useTableCRUD({
    api,
    searchData,
    getDataOnMounted: false
})

const beforeChange = async row => {
    const isActive = row.isActive === 1 ? 0 : 1
    try {
        row.switchLoading = true
        await api.updateIsActive({
            kid: row.kid,
            isActive
        })

        ElMessage.success('修改成功')
        return true
    } catch (error) {
        defaultCatchError(error)
        return false
    } finally {
        row.switchLoading = false
    }
}

const tableProps = reactive({
    tableColumns: [
        {
            prop: 'userId',
            label: '登录ID'
        },
        {
            prop: 'userIdGpallas',
            label: '关联ID'
        },
        {
            prop: 'userName',
            label: '姓名'
        },
        {
            prop: 'deptName',
            label: '所属部门'
        },
        {
            prop: 'isActive',
            label: '是否开放账号',
            render: ({ row, item }) => {
                return (
                    <ElSwitch
                        v-model={row[item.prop]}
                        loading={row.switchLoading}
                        beforeChange={() => beforeChange(row)}
                        activeValue={1}
                        inactiveValue={0}
                    ></ElSwitch>
                )
            }
        },
        {
            label: '操作',
            width: 120,
            fixed: 'right',
            render: ({ row, item }) => {
                return (
                    <BaseTableOperateList
                        list={[
                            { type: 'edit', perms: [`/systemManagement/accountManagement/updatePsw`], props: { onClick: () => dialogUpdate(row) }},
                            { type: 'edit', label: '关联账号', perms: [`/systemManagement/accountManagement/updateGpllasInfo`], props: { onClick: () => associateDialogUpdate(row) }}
                        ]}
                    ></BaseTableOperateList>
                )
            }
        }
    ]
})
</script>

<style lang="scss" scoped></style>